home *** CD-ROM | disk | FTP | other *** search
/ SPACE 2 / SPACE - Library 2 - Volume 1.iso / apps / 42 / wind8.prf < prev    next >
Text File  |  1986-07-17  |  26KB  |  524 lines

  1. .!****************************************************************************
  2. .! 
  3. .! ANTIC PUBLISHING INC., COPYRIGHT 1985.  REPRINTED BY PERMISSION.
  4. .!
  5. .! ** Professional GEM ** by Tim Oren
  6. .!
  7. .! Proff File by ST enthusiasts at
  8. .! Case Western Reserve University
  9. .! Cleveland, Ohio
  10. .! uucp : decvax!cwruecmp!bammi
  11. .! csnet: bammi@case
  12. .! arpa : bammi%case@csnet-relay
  13. .! compuserve: 71515,155
  14. .!
  15. .!****************************************************************************
  16. .!
  17. .!
  18. .!****************************************************************************
  19. .!
  20. .!            Begin Part 8
  21. .!
  22. .!****************************************************************************
  23. .!
  24. .PART VIII  USER INTERFACES
  25. .SH AND NOW FOR SOMETHING COMPLETELY DIFFERENT!
  26. In response to a
  27. number of requests, this installment of ST PRO GEM will be devoted
  28. to examining a few of the principles of computer/human interface
  29. design, or "religion" as some would have it.  I'm going to start
  30. with basic ergonomic laws, and try to draw some conclusions which
  31. are fairly specific to designing for the ST.  If this article
  32. meets with general approval, further "homilies" may appear at
  33. irregular intervals as part of the ST PRO GEM series.
  34. .PP
  35. For those who did NOT ask for this topic, it seems fair to
  36. explain why your diet of hard-core technical information has been
  37. interrupted by a sermon!  As a motivater, we might consider why
  38. some programs are said by reviewers to have a "hot" feel (and
  39. hence sell well!) while others are "confusing" or "boring".
  40. .PP
  41. Alan Kay has said that "user interface is theatre".  I think
  42. we may be able to take it further, and suggest that a successful
  43. program works a bit of magic, persuading the user to suspend his
  44. disbelief and enter an imaginary world behind the screen, whether
  45. it is the mathematical world of a spreadsheet, or the land of Pacman
  46. pursued by ghosts.
  47. .PP
  48. A reader of a novel or science fiction story also suspends
  49. disbelief to participate in the work.  Bad grammar and clumsy plotting
  50. by the author are jarring, and break down the illusion.  Similarly,
  51. a programmer who fails to pay attention to making his interface
  52. fast and consistent will annoy the user, and distract him from
  53. whatever care has been lavished on the functional core of the program.
  54. .SH CREDIT WHERE IT'S DUE
  55. Before launching into the discussion
  56. of user interface, I should mention that the general treatment and
  57. many of the specific research results are drawn from Card, Newell,
  58. and Moran's landmark book on the topic, which is cited at the end
  59. of the article.  Any errors in interpretation and application to
  60. GEM and the ST are entirely my own, however.
  61. .SH FINGERTIPS
  62. We'll start right at the user's fingers with the
  63. basic equation governing positioning of the mouse, Fitt's Law,
  64. which is given as
  65. .sp 1
  66. .ce 1
  67. T = I * LOG2( D / S + .5)
  68. .sp 1
  69. where T is the amount of time to move to a target, D is the distance
  70. of the target from the current position, and S is the size of the
  71. target, stated in equivalent units.  LOG2 is the base 2 (binary)
  72. logarithm function, and I is a proportionality constant, about
  73. 100 milliseconds per bit, which corresponds to the human's "clock
  74. rate" for making incremental movements.
  75. .PP
  76. We can squeeze an amazing amount of information out of this
  77. formula when attempting to speed up an interface.  Since motion time
  78. goes up with distance, we should arrange the screen with the
  79. usual working area near the center, so the mouse will have to move
  80. a smaller distance on average from a selected object to a menu or
  81. panel.  Likewise, any items which are usually used together should
  82. be placed together.
  83. .PP
  84. The most common operations will have the greater impact on
  85. speed, so they should be closest to the working area and perhaps
  86. larger than other icons or menu entries.  If you want to have
  87. all other operations take about the same time, then the targets
  88. farthest from the working area should be larger, and those closer
  89. may be proportionately smaller.
  90. .PP
  91. Consider also the implications for dialogs.  Small check boxes
  92. are out.  Large buttons which are easy to hit are in.  There should
  93. be ample space between selectable items to allow for positioning
  94. error.  Dangerous options should be widely separated from common
  95. selections.
  96. .SH MUSCLES
  97. Anyone who has used the ST Desktop for any period
  98. of time has probably noticed that his fingers now know where to find
  99. the File menu.  This phenomenon is sometimes called "muscle memory",
  100. and its rate of onset is given by the Power Law of Practice:
  101. .sp 1
  102. .ce 1
  103. T(n) = T(1) * n ** (-a)
  104. .sp 1
  105. where T(n) is the time on the nth trial, T(1) is the time on the
  106. first trial, and a is approximately 0.4.  (I have appropriated
  107. ** from Fortran as an exponentiation operator, since C lacks one.)
  108. .PP
  109. This first thing to note about the Power Law is that it only
  110. works if a target stays in the same place!  This should be a potent
  111. argument against rearranging icons, menus, or dialogs without some
  112. explicit request by the user.  The time to hit a target which moves
  113. around arbitrarily will always be T(1)!
  114. .PP
  115. In many cases, the Power Law will also work for sequences of
  116. operations to even greater effect.  If you are a touch typist, you
  117. can observe this effect by comparing how fast you can enter "the"
  118. in comparison to three random letters.  We'll come back shortly
  119. to consider what we can do to encourage this phenomenon.
  120. .SH EYES
  121. Just as fingers are the way the user sends data to the
  122. computer, so the eyes are his channel from the machine.  The rate
  123. at which information may be passed to the user is determined by
  124. the "cycle time" of his visual processor.  Experimental results
  125. show that this time ranges between 50 and 200 milliseconds.
  126. .PP
  127. Events separated by 50 milliseconds or less are always
  128. perceived as a single event.  Those separated by more than 200
  129. milliseconds are always seen as separate.  We can use these
  130. facts in optimizing user of the computer's power when driving the
  131. interface.
  132. .PP
  133. Suppose your application's interface contains an icon which
  134. should be inverted when the mouse passes over it.  We now know
  135. that flipping it within one twentieth of a second is necessary
  136. and sufficient.  Therefore, if a "first cut" at the program achieves
  137. this performance, there is no need for further optimization, unless
  138. you want to interleave other operations.  If it falls short, it will
  139. be necessary to do some assembly coding to achieve a smooth feel.
  140. .PP
  141. On the other hand, two actions which you want to appear distinct
  142. or convey two different pieces of information must be separated
  143. by an absolute minimum of a fifth of a second, even assuming that
  144. they occur in an identical location on which the user's attention
  145. is already focused.
  146. .PP
  147. We are able to influence the visual processing rate within the
  148. 50 to 200 millisecond range by changing the intensity of the stimulus
  149. presented.  This can be done with color, by flashing a target, or
  150. by more subtle enhancements such as bold face type.  For instance,
  151. most people using GEM soon become accustomed to the "paper white"
  152. background of most windows and dialogs.  A dialog which uses a
  153. reverse color scheme, white letters on black, is visually shocking
  154. in its starkness, and will immediately draw the user's eyes.
  155. .PP
  156. It should be quickly added that stimulus enhancement will only
  157. work when it unambiguously draws attention to the target.  Three or
  158. four blinking objects scattered around the screen are confusing, and
  159. worse than no enhancement at all!
  160. .SH SHORT-TERM MEMORY
  161. Both the information gathered by the eyes
  162. and movement commands on their way to the hand pass through short-term
  163. memory (also called working memory).  The amount of information which
  164. can be held in short-term memory at any one time is limited.  You can
  165. demonstrate this limit on yourself by attempting to type a sheet of
  166. random numbers by looking back and forth from the numbers to the
  167. screen.  If you are like most people, you will be able to remember
  168. between five and nine numbers at a time.  So universal is this
  169. finding that it is sometimes called "the magic number seven, plus
  170. or minus two".
  171. .PP
  172. This short-term capacity sets a limit on the number of choices
  173. which the user can be expected to grasp at once.  It suggests that
  174. the number of independent choices in a menu, for instance, should
  175. be around seven, and never exceed nine.  If this limit is violated,
  176. then the user will have to take several glances, with pauses to
  177. think, in order to make a choice.
  178. .SH CHUNKING
  179. The effective capacity of short-term memory can be
  180. increased when several related items are mentally grouped as a "chunk".
  181. Humans automatically adopt this strategy to save themselves time.
  182. For instance, random numbers had to be used instead of text in the
  183. example above, because people do not type their native language as
  184. individual characters.  Instead, they combine the letters into words
  185. and remember these chunks instead.  Put another way, the characters
  186. are no longer considered as individual choices.
  187. .PP
  188. A well designed interface should promote the use of chunking
  189. as a strategy by the user.  One easy way is to gather together
  190. related options in a single place.  This is one reason that like
  191. commands are grouped into a single menu which is hidden except for
  192. its title.  If all of the menu options were "in the open", the user
  193. would be overwhelmed with dozens of alternatives at once.  Instead, a
  194. "Show Info" command, for instance, becomes two chunks: pick File
  195. menu, then pick Show.
  196. .PP
  197. Sometimes the interface can accomplish the chunking for the user.
  198. Consider the difference between a slider bar in a GEM program, and
  199. a three digit entry field in a text mode application.  Obviously,
  200. the GEM user has fewer decisions to make in order to set the associated
  201. variable.
  202. .SH THINK!
  203. While we are puttering around trying to speed up
  204. the keyboard, the mouse, and the screen, the user is actually
  205. trying to get some work done.  We need to back off now, and
  206. look at the ways of thinking, or cognitive processes, that go into
  207. accomplishing the job.
  208. .PP
  209. The user's goal may be to enter and edit a letter, to retrieve
  210. information from a database, or simply draw a picture, but it
  211. probably has very little to do with programming.  In fact, the
  212. Problem Space Principle says that the task can be described as
  213. a set of states of knowledge, a set of operators and associated
  214. constraints for changing the states, and the knowledge to
  215. choose the appropriate operator, which resides in the user's head.
  216. .PP
  217. Those with a background in systems theory can consider this
  218. as a somewhat abstract, but straightforward, statement in terms of
  219. state variables and operators.  A programmer might compare the
  220. knowledge states to the values of variables, the operators to
  221. arithmetic and logic operations, the constraints to the rules of
  222. syntax, and the user's knowledge to the algorithm embodied by a
  223. program.
  224. .SH ARE WE NOT MEN?
  225. A rational person will try to attain his
  226. goals (get the job done) by changing the state of his problem space
  227. from its initial state to the goal state.  The initial state,
  228. for instance, might be a blank word processor screen.  The desired
  229. final state is to have a completed business letter on the screen.
  230. .PP
  231. The Rationality Principle says that the user's behavior in
  232. typing, mousing, and so on, can be explained by considering the
  233. tasks required to achieve the goal, the operators available to
  234. carry out the tasks, and the limitations on the user's knowledge,
  235. observations, and processing capacity.  This sounds like the
  236. typical user of a computer program must spend a good deal of time
  237. scratching his head and wondering what to do next.  In fact, one
  238. of Card and Moran's key results is that this is NOT what takes place.
  239. .PP
  240. What happens, in fact, is that the trained user strikes a sort
  241. of "modus vivendi" with his tool and adopts a set of repetitive,
  242. trained behavior patterns as the best way to get the job done.
  243. He may go so far as to ignore some functions of the program in
  244. order to set up a reliable pattern.  What we are looking for is a
  245. way of measuring and predicting the "quality" of this trained
  246. behavior.  Since using computers is a human endeavor, we should
  247. consider not only the speed with which the task is completed, but
  248. the degree of annoyance or pleasure associated with the process.
  249. .PP
  250. Card and Moran constructed a series of behavioral models which
  251. they called GOMS models, for Goals-Operators-Methods-Selection.
  252. These models suggested that in the training process the user
  253. learned to combine the basic operators in sequences (chunks!)
  254. which then became methods for reaching the goals.  Then these
  255. first level methods might be combined again into second level
  256. methods, and so forth, as the learning progressed.
  257. .PP
  258. The GOMS models were tested in a lengthy series of trials
  259. at Xerox PARC using a variety of word processing software.  (Among
  260. the subjects of these experiments were the inventors of
  261. the windowing methods used in GEM!)  The results were again
  262. surprising: the level of detail in the models was really unimportant!
  263. .PP
  264. It turned out to be sufficient to merely count up the number
  265. of keystrokes, mouse movements, and thought intervals required
  266. by each task.  After summing up all of the tasks, any extra time
  267. for the computer to respond, or the user to move his hands from
  268. keyboard to mouse, or eyes from screen to printed page is added in.
  269. This simplified version is called the Keystroke-Level Model.
  270. .PP
  271. As an example of the Keystroke Model, consider the task of
  272. changing a mistyped letter on the screen of a GEM word processor.
  273. This might be broken down as follows: 1) find the letter on the screen;
  274. 2) move hand to mouse; 3) point to letter; 4) click mouse button;
  275. 5) move hand to keyboard; 6) strike "Delete" key; 7) strike key
  276. for new character.
  277. .PP
  278. The sufficiency of the Keystroke Model is great news for our
  279. attempt to design faster interfaces.  It says we can concentrate
  280. our efforts on minimizing the number of total actions to be taken,
  281. and making sure that each action is as fast as possible.  We have
  282. already discussed some ways to speed up the mouse and keyboard
  283. actions, so let's now consider how to speed up the thought intervals,
  284. and cut the number of actions.
  285. .PP
  286. One way to cut down "think time" is to make sure that the
  287. capacity of short-term memory is not exceeded during the course of
  288. a task.  For example, the fix-a-letter task described above required
  289. the user to remember 1) his place in the overall job of typing the
  290. document; 2) the task he is about to perform; 3) where the bad
  291. character appeared, and 4) what the new character was.  When this
  292. total of items creeps toward seven, the user often loses his place
  293. and commits errors.
  294. .PP
  295. You can appreciate the ubiquity of this problem by considering
  296. how many times you have made mistakes nesting parentheses,
  297. or had to go back to count them, because too many things happened
  298. while typing the line to remember the nesting levels. The moral is that
  299. operations with long strings of operands should be avoided when
  300. designing an interface.
  301. .PP
  302. The single most important factor in making an interface
  303. comfortable to use is increasing its predictability, and
  304. decreasing the amount of indecision present at each step during
  305. a task.  There is (inevitably) an Uncertainty Principle which
  306. relates the number of choices at each step to the associated
  307. time for thought:
  308. .sp 1
  309. .ce 1
  310. T = I * LOG2 ( N + 1)
  311. .sp 1
  312. where LOG2 is the binary logarithm function, N is the number of
  313. equally probable choices, and I is a constant of approximately
  314. 140 msec/bit.  When the alternates are not equally probable, the
  315. function is more complex:
  316. .sp 1
  317. .ce 1
  318. T = I * SUM-FOR-i-FROM-1-TO-N (P(i) * LOG2( 1 / P(i) + 1) )
  319. .sp 1
  320. where the P(i) are the probabilities of each of the choices (which
  321. must sum to one).  (SUM-FOR-i... is the best I can do for a sigma
  322. operator on-line!)  Those of you with some information theory
  323. background will recognize this formula as the entropy of
  324. the decision; we'll come back to that later.
  325. .PP
  326. So what can we learn from this hash?  It turns out, as we might
  327. expect, that we can decrease the decision time by making some
  328. of the user's choices more probable than others.  We do that by
  329. means of feedback cues from the interface.
  330. .PP
  331. The important of reliable, continuous meaningful feedback
  332. cannot be emphasized enough.  It helps the beginner learn the system,
  333. and its predictability makes the program comfortable for the expert.
  334. Programs with no feedback, or unreliable cues, produce confusion,
  335. dissonance, and frustration in the user.
  336. .PP
  337. This principle is so important that I going to give several
  338. examples from common GEM practice.  The Desktop provides several
  339. instances.  When an object is selected and a menu drops down, only
  340. those choices which are legal for the object are in black.  The
  341. others are dimmed to grey, and are therefore removed from the
  342. decision.  When a pick is made from the menu, the bar entry remains
  343. black until the operation is complete, reassuring the user that
  344. the correct choice was made.  In both the Desktop and the RCS,
  345. items which are double-clicked open up with a "zoom box" from
  346. the object, again showing that the right object was picked.
  347. .PP
  348. Other techniques are useful when operator icons are exposed on
  349. the screen.  When an object is picked, the legal operations might
  350. be outlined, or the bad choices might be dimmed.  If the screen
  351. flashing produced by this is objectionable, the legal icons can
  352. be made mouse sensitive, so they will "light up" when the cursor
  353. passes over - again showing the user which choices are legal.
  354. .PP
  355. The desire for feedback is so strong that it should be provided
  356. even while the computer is doing an operation on its own.  The hour
  357. glass mouse form is a primitive example of this.  More sophisticated
  358. are "progress indicators" such as animated thermometer bars,
  359. clocks, or text displays of the processing steps.  The ST Desktop
  360. provides examples in the Format and Disk Copy functions.  The purpose
  361. of all of these is to reassure the user that the operation is
  362. progressing normally.  Their lack can lead to amusing spectacles
  363. such as secretaries leaning over to hear if their disk drives are
  364. working!
  365. .PP
  366. Another commonly overlooked feature is error prevention and
  367. correction.  Card and Moran's results showed that in order to go
  368. faster, people will tolerate error rates of up to 30% in their
  369. work.  Any program which does not give a fast way to fix mistakes
  370. will be frustrating indeed!
  371. .PP
  372. The best way to cope with an error is to "make it didn't happen",
  373. to quote a common child's phrase.  The same feedback methods
  374. discussed above are also effective in preventing the user from
  375. picking inappropriate combinations of objects and operations.
  376. Replacement of numeric type-ins with sliders or other visual
  377. controls eliminates the common "Range Error".  The use of radio
  378. buttons prevents the user from picking incompatible options.
  379. When such techniques are used consistently, the beginner also
  380. gains confidence that he may explore the program without blundering
  381. into errors.
  382. .PP
  383. Once an error has occured, the best solution is to have an
  384. "inverse operation" immediately available.  For instance, the way
  385. to fix a bad character is to hit the backspace key.  If a line is
  386. inadvertantly deleted, there should be a way to restore it.
  387. .PP
  388. Sometimes the mechanics of providing true inverses are
  389. impractical, or end up cluttering the interface themselves.  In
  390. these cases, a global "Undo" command should be provided to
  391. reverse the effect of the last operation, no matter what it was.
  392. .SH OF MODES AND BANDWIDTH
  393. Now I am going to depart from
  394. the Card, Newell and Moran thread of discussion to consider
  395. how we can minimize the number of operations in a task by
  396. altering the modes of the interface.  Although "no modes" has
  397. been a watchword of Macintosh developers, the term may need
  398. definition for Atarians.
  399. .PP
  400. Simply stated, a mode exists any time you cannot get to
  401. all of the capabilities of the program without taking some
  402. intermediate step.  Familiar examples are old-style "menu-driven"
  403. programs, in which user must make selections from a number of
  404. nested menus in order to perform any operation.  The options
  405. of any one menu are unavailable from the others.
  406. .PP
  407. Recall that the user is trying to accomplish work in his
  408. own problem space, by altering its states.  A mode in the
  409. program adds additional states to the problem space, which he is
  410. forced to consider in order to get the job done.  We might call
  411. an interface which is completely modeless "transparent", because it
  412. adds no states between the user and his work.  One of the best
  413. examples of a transparent program is the 15-puzzle in the Macintosh
  414. desk accessory set.  The problem space of rearranging the tiles
  415. is identical between the program and a physical puzzle.
  416. .PP
  417. Unfortunately, most programmers find themselves forced to
  418. put modes of some sort into their programs.  These often arise
  419. due to technological limitations, such as memory space, screen
  420. "real estate", or performance limitations of peripherals.  The
  421. question is how the modes can be made least offensive.
  422. .PP
  423. I will make the general claim that the frustration which a
  424. mode produces is directly proportional to the amount of the user's
  425. bandwidth which it consumes.  In other words, we need to consider
  426. how many keystrokes, mouse clicks, eye movements, and so on, are
  427. going into manipulating the true problem states, and how many
  428. are being absorbed by the modes of the program.  If the interface
  429. is wasting a large amount of the user's effort, it will be perceived
  430. as slow and annoying.
  431. .PP
  432. Here we can consider again the hierarchy of goals and methods
  433. which the user employs.  When the mode is low in the hierarchy,
  434. and close to the user's "fingertips", it is encountered the most
  435. frequently.  For instance, consider how frustrating it would be
  436. to have to hit a function key before typing in each character!
  437. .PP
  438. The "menu-driven" style of programs mentioned above are
  439. almost as bad, since usually only one piece of information is
  440. collected at each menu.  Such a program becomes a labyrinth of
  441. states better suited to an adventure game!
  442. .PP
  443. The least offensive modes are found at the higher, goal
  444. related levels of the hierarchy.  The better they align with
  445. changes in the state of the original problem, the more they
  446. are tolerated.  For example, a word processing program might
  447. have one screen layout for program editing, another for writing
  448. letters, and yet another while printing the documents.  A
  449. multi-function business package might have one set of menus for
  450. the spreadsheet, another for a graphing module, and a third
  451. for a database.
  452. .PP
  453. In some cases the problem solved by the program has convenient
  454. "fracture lines" which can be used to define the modes.  An
  455. example in my own past is the RCS, where the editing of each
  456. type of resource tree forms its own mode, with each of the modes
  457. nested within the overall mode and problem of composing the
  458. entire resource tree.
  459. .SH  TO DO IS TO BE!
  460. Any narrative description of user interface
  461. is bound to be lacking.  There is no way text can convey the vibrancy
  462. and tactile pleasure of a good interface, or the sullen boredom
  463. of a bad one.  Therefore, I encourage you to experiment.  Get out
  464. your favorite arcade game and see if you can spot some of the
  465. elements I have described.  Dig into your slush pile for the most
  466. annoying program you have ever seen, run it and see if you can see
  467. mistakes.  How would you fix them?  Then... go do it to your own
  468. program!
  469. .SH AMEN...
  470. This concludes the sermon.  I'd like some Feedback
  471. as to whether you found this Boring Beyond Belief or Really Hot
  472. Stuff.  If enough people are interested, homily number two will
  473. appear a few episodes from now.   The very next installment of ST
  474. PRO GEM will go back to basics to explore VDI drawing primitives.
  475. In the meantime, you might investigate some of the Good Books on
  476. interface design referenced below.
  477. .br
  478. .ne 4
  479. .bold 1
  480. REFERENCES
  481. .sp 1
  482. .in +4
  483. Stuart K. Card, Thomas P. Moran, and Allen
  484. Newell, THE PSYCHOLOGY OF HUMAN-COMPUTER INTERACTION, Lawrence
  485. Erlbaum Associates, Hillsdale, New Jersey, 1983.
  486. .br
  487. (Fundamental
  488. and indispensible.  The volume of experimental results make it
  489. weighty.  The Good Parts are at the beginning and end.)
  490. .sp 1
  491. "Macintosh User Interface Guidelines", in INSIDE MACINTOSH,
  492. Apple Computer, Inc., 1984.
  493. .br
  494. (Yes, Atarians, we have something to
  495. learn here.  Though not everything "translates", this is a fine
  496. piece of principled design work.  Read and appreciate.)
  497. .sp 1
  498. James D. Foley, Victor L. Wallace, and Peggy Chan, "The
  499. Human Factors of Computer Graphics Interaction Techniques",
  500. IEEE Computer Graphics (CG & A), November 1984, pp. 13-48.
  501. .br
  502. (A good overview, including higher level topics which I have
  503. postponed to a later article.  Excellent bibliography.)
  504. .sp 1
  505. J. D. Foley and A. Van Dam, FUNDAMENTALS OF INTERACTIVE
  506. COMPUTER GRAPHICS, Addison Wesley, 1984, Chapters 5 and 6.
  507. .br
  508. (If you can't get the article above, read this.  If you are designing
  509. graphics apps, buy the whole book!  Staggering bibliography.)
  510. .sp 1
  511. Ben Schneidermann, "Direct Manipulation: A Step Beyond
  512. Programming Languages", IEEE Computer, August 1983, pp. 57-69.
  513. .br
  514. (What do Pacman and Visicalc have in common?  Schneidermann's
  515. analysis is vital to creating hot interfaces.)
  516. .in -4
  517. .!
  518. .!
  519. .!*****************************************************************************
  520. .!*                                          *
  521. .!*                End Part 8                      *
  522. .!*                                          *
  523. .!*****************************************************************************
  524.